<template>
  <div class="header column">
    <el-form
      :inline="true"
      ref="form"
      :model="formData"
      size="mini"
      class="row"
    >
      <slot name="operation">
        <el-form-item class="col-1">
          <slot name="add-btn"> </slot>
        </el-form-item>
      </slot>

      <template v-for="key in formDataKeys">
        <template v-if="/MID/i.test(key)">
          <el-form-item :key="key">
            <select-merchantid v-model="formData[key]"></select-merchantid>
          </el-form-item>
        </template>
        <template v-else-if="/sid|ServiceID/i.test(key)">
          <el-form-item :key="key">
            <select-id
              v-model="formData[key]"
              label-key="ServiceName"
              apiName="/api/Common/GetServiceProviderList"
              @change="onChange"
            ></select-id>
          </el-form-item>
        </template>
        <template v-else-if="key === 'BeginDate'">
          <el-form-item :key="key">
            <el-date-picker
              v-model="value2"
              type="daterange"
              align="right"
              unlink-panels
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
              @change="dateChange"
              size="mini"
            >
            </el-date-picker>
          </el-form-item>
        </template>
        <template v-else-if="key == 'RechargeStatus'">
          <el-form-item :key="key">
            <select-status
              v-model="model[key]"
              @change="onChange"
              :placeholder="`${$language.local('请选择')}${$language.local(
                key
              )}`"
            ></select-status>
          </el-form-item>
        </template>
        <template v-else-if="key == 'BusinesStatus'">
          <el-form-item :key="key">
            <el-select v-model="formData.BusinesStatus" clearable>
              <el-option
                :label="$language.local('待处理')"
                value="W"
              ></el-option>
              <el-option
                :label="$language.local('处理中')"
                value="C"
              ></el-option>
              <el-option :label="$language.local('成功')" value="S"></el-option>
              <el-option :label="$language.local('失败')" value="F"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-else-if="/(Trade|query)YM/i.test(key)">
          <el-form-item :key="key">
            <el-date-picker
              v-model="formData[key]"
              type="month"
              format="yyyy年MM月"
              value-format="yyyy年MM月"
              :placeholder="$language.local('选择月份')"
            >
            </el-date-picker>
          </el-form-item>
        </template>
        <template v-else-if="key == 'Status' || key == 'CheckStatus'">
          <el-form-item :key="key">
            <el-select
              v-model="formData[key]"
              :placeholder="`${$language.local('请选择')}${$language.local(
                key
              )}`"
              clearable
              @change="onChange"
            >
              <el-option label="待审核" :value="-1"></el-option>
              <el-option label="审核通过" :value="1"></el-option>
              <el-option label="审核未通过" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-else-if="key === 'auditStatus'">
          <el-form-item :key="key">
            <el-select
              v-model="formData[key]"
              :placeholder="`${$language.local('请选择')}${$language.local(
                key
              )}`"
              clearable
              @change="onChange"
            >
              <el-option label="待认证" :value="-1"></el-option>
              <el-option label="已认证" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-else-if="key === 'status'">
          <el-form-item :key="key">
            <el-select
              v-model="formData[key]"
              :placeholder="`${$language.local('请选择')}${$language.local(
                key
              )}`"
              clearable
              @change="onChange"
            >
              <el-option label="待签约" :value="-1"></el-option>
              <el-option label="已签约" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-else-if="key === 'Verify'">
          <el-form-item :key="key">
            <el-select
              v-model="formData[key]"
              :placeholder="`${$language.local('请选择')}${$language.local(
                key
              )}`"
              clearable
              @change="onChange"
            >
              <el-option label="未验签" :value="-1"></el-option>
              <el-option label="已验签" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-else-if="key == 'InvoiceBusinessStatus'">
          <el-form-item :key="key">
            <el-select v-model="formData[key]" clearable>
              <el-option
                v-for="item in InvoiceBusinessStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
      </template>
      <el-form-item v-if="formDataKeys2.length > 0">
        <el-button
          v-if="isCollapse"
          type="text"
          @click="toggleCollapse"
          icon="el-icon-arrow-down"
        >
          展开
        </el-button>
        <el-button
          v-else
          type="text"
          @click="toggleCollapse"
          icon="el-icon-arrow-up"
        >
          收起
        </el-button>
      </el-form-item>
    </el-form>
    <template v-if="formDataKeys2.length > 0">
      <el-collapse-transition>
        <div v-show="!isCollapse">
          <el-form
            :inline="true"
            ref="form2"
            :model="formData"
            size="mini"
            class="row"
          >
            <template v-for="key in formDataKeys2">
              <template v-if="/MID/i.test(key)">
                <el-form-item :key="key">
                  <select-merchantid
                    v-model="formData[key]"
                  ></select-merchantid>
                </el-form-item>
              </template>
              <template v-else-if="/sid|ServiceID/i.test(key)">
                <el-form-item :key="key">
                  <select-id
                    v-model="formData[key]"
                    label-key="ServiceName"
                    apiName="/api/Common/GetServiceProviderList"
                    @change="onChange"
                  ></select-id>
                </el-form-item>
              </template>
              <template v-else-if="key === 'BeginDate'">
                <el-form-item :key="key">
                  <el-date-picker
                    v-model="value2"
                    type="daterange"
                    align="right"
                    unlink-panels
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd"
                    @change="dateChange"
                    size="mini"
                  >
                  </el-date-picker>
                </el-form-item>
              </template>
              <template v-else-if="key == 'RechargeStatus'">
                <el-form-item :key="key">
                  <select-status
                    v-model="model[key]"
                    @change="onChange"
                    :placeholder="`${$language.local(
                      '请选择'
                    )}${$language.local(key)}`"
                  ></select-status>
                </el-form-item>
              </template>
              <template v-else-if="key == 'BusinesStatus'">
                <el-form-item :key="key">
                  <el-select v-model="formData.BusinesStatus" clearable>
                    <el-option
                      :label="$language.local('待处理')"
                      value="W"
                    ></el-option>
                    <el-option
                      :label="$language.local('处理中')"
                      value="C"
                    ></el-option>
                    <el-option
                      :label="$language.local('成功')"
                      value="S"
                    ></el-option>
                    <el-option
                      :label="$language.local('失败')"
                      value="F"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>
              <template v-else-if="key == 'TradeYM'">
                <el-form-item :key="key">
                  <select-date v-model="formData[key]"></select-date>
                </el-form-item>
              </template>
              <template v-else-if="key == 'Status' || key == 'CheckStatus'">
                <el-form-item :key="key">
                  <el-select
                    v-model="formData[key]"
                    :placeholder="`${$language.local(
                      '请选择'
                    )}${$language.local(key)}`"
                    clearable
                    @change="onChange"
                  >
                    <el-option label="待审核" :value="-1"></el-option>
                    <el-option label="审核通过" :value="1"></el-option>
                    <el-option label="审核未通过" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </template>
              <template v-else-if="key === 'auditStatus'">
                <el-form-item :key="key">
                  <el-select
                    v-model="formData[key]"
                    :placeholder="`${$language.local(
                      '请选择'
                    )}${$language.local(key)}`"
                    clearable
                    @change="onChange"
                  >
                    <el-option label="待认证" :value="-1"></el-option>
                    <el-option label="已认证" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </template>
              <template v-else-if="key === 'status'">
                <el-form-item :key="key">
                  <el-select
                    v-model="formData[key]"
                    :placeholder="`${$language.local(
                      '请选择'
                    )}${$language.local(key)}`"
                    clearable
                    @change="onChange"
                  >
                    <el-option label="待签约" :value="-1"></el-option>
                    <el-option label="已签约" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </template>
              <template v-else-if="key === 'Verify'">
                <el-form-item :key="key">
                  <el-select
                    v-model="formData[key]"
                    :placeholder="`${$language.local(
                      '请选择'
                    )}${$language.local(key)}`"
                    clearable
                    @change="onChange"
                  >
                    <el-option label="未验签" :value="-1"></el-option>
                    <el-option label="已验签" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </template>
              <template v-else-if="key == 'InvoiceBusinessStatus'">
                <el-form-item :key="key">
                  <el-select v-model="formData[key]" clearable>
                    <el-option
                      v-for="item in InvoiceBusinessStatusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </template>
            <slot name="append" :formData="formData"></slot>
          </el-form>
        </div>
      </el-collapse-transition>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    model: Object,
    onSearch: Function,
    keywords: String,
  },

  data() {
    return {
      InvoiceBusinessStatusOptions: [
        { label: "待审核", value: 0 },
        { label: "已申请", value: 1 },
        { label: "已通过待开票", value: 2 },
        { label: "已开票并邮寄", value: 3 },
        { label: "审核未通过", value: 4 },
        { label: "已取消", value: 5 },
      ],
      formData: this.model,
      formDataKeys: [],
      formDataKeys2: [],
      value1: "",
      value2: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      isCollapse: true,
      hiddenSidMid: "",
    };
  },
  watch: {
    formData: {
      handler: function () {
        // do something
        this.search();
      },
      deep: true,
    },
  },
  created() {
    console.log(this.model);
    console.log(this.formData);
    let keys = Object.keys(this.model);

    if (keys.length > 3) {
      this.formDataKeys = keys.slice(0, 4);
      this.formDataKeys2 = keys.slice(4);
    } else {
      this.formDataKeys = keys;
    }
    if ("BeginDate" in this.model) {
      this.value2 = [this.model.BeginDate, this.model.EndDate];
    }
  },
  methods: {
    search() {
      if (this.onSearch) {
        this.onSearch(this.formData);
      }
    },
    onChange() {
      // this.search();
    },
    dateChange(e) {
      console.log(e);

      let temp = {
        ...this.formData,
        BeginDate: e[0],
        EndDate: e[1],
      };
      this.formData = temp;
      //  this.search();
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>

<style lang="less" scoped>
.el-date-picker {
  flex: 1;
}
</style>
